<template>
  <div class="container">
    <div class="header">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-row>
          <!-- 文章列表数据 -->
          <el-col :span="12" :md="12" :xs="24" :offset="0">
            <div class="head-function-showMessage-area">
              <TitleBar title="文章总数" icon="bi bi-list-ol">
                <template #default>
                  <span class="blog-count">{{ totalCount }}篇</span>
                </template>
              </TitleBar>
              <TitleBar title="正在浏览" icon="bi bi-tv-fill" class="title-bar">
                <template #default>
                  <span class="blog-count">{{ tableData.length }}篇</span>
                </template>
              </TitleBar>
            </div>
          </el-col>
          <!-- Blog搜索功能 -->
          <el-col :span="12" :md="12" :xs="24" :offset="0">
            <div class="head-function-area">
              <InputSearch class="input-search" @onInputSearch="SearchInput"></InputSearch>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="body">
      <el-card
        shadow="always"
        :body-style="{ padding: '20px' }"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="编号" width="auto" />
          <el-table-column prop="title" label="博客标题" width="auto" />
          <el-table-column prop="introduction" label="简介" class="introduction-column" />
          <el-table-column sortable label="创建时间" width="auto">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <i class="fa fa-calendar" aria-hidden="true"></i>
                <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="更新时间" sortable width="auto">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <i class="fa fa-calendar" aria-hidden="true"></i>
                <span style="margin-left: 10px">{{ scope.row.update_time }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="auto">
            <template #default>
              <el-button size="small">编辑</el-button>
              <el-button size="small" type="primary">详情</el-button>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalCount"
            :page-size="10"
            :page-sizes="[10]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import InputSearch from "@/components/common/InputSearch.vue";
import TitleBar from "@/components/common/TitleBar.vue";
export default {
  data() {
    return {
      tableData: [],
      totalCount: 0,
    };
  },
  async created() {
    const response = await this.$http.get("/api/getArticleList?page=1" + "&&perPage=10");
    this.tableData = response.data.data;
    const countResponse = await this.$http.get("/api/getAllBlogCount");
    this.totalCount = countResponse.data.data.count;
  },
  methods: {
    async handleCurrentChange(newPage) {
      const response = await this.$http.get("/api/getArticleList?page=" + newPage + "&&perPage=10");
      this.tableData = [];
      for (let o in response.data.data) {
        this.tableData.push(response.data.data[o]);
      }
    },
    handleSizeChange(val) {},
    async SearchInput(value) {
      // 即时搜索
      const response = await this.$http.get(
        "/api/manager/blog/getBlogsWithKeyWords?keywords=" + value
      );
      this.tableData = [];
      for (let o in response.data.rows) {
        this.tableData.push(response.data.rows[o]);
      }
    },
  },
  components: {
    InputSearch,
    TitleBar,
  },
};
</script>

<style scoped>
:deep() .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.body,
.header {
  margin-top: 16px;
  margin-right: 16px;
}
.input-search {
  width: 16rem;
}

.head-function-area {
  display: flex;
  justify-content: end;
}
.head-function-showMessage-area {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

.blog-count {
  margin-left: 0.5rem;
}

.title-bar {
  margin-left: 2rem;
}
</style>
